<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模型信息</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!--轮播-->
<link rel="stylesheet" href="/css/bootstrap4-3-1.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<!-- Dialog -->
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>
<script src="/js/index.js"></script>

<style>
    .session_box{
        width: 80%;height: 100%;
        background-color: white;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .session{
        width: calc(50% - 2px);
        height: calc(50% - 5px);
        background-color: white;
        margin-left: 2px;
        margin-top: 5px;
    }
    .session_img{
        width: calc(100%);height:calc(100%)
    }
    .p{
        text-align: left;
        font-size: 15px;
        margin: 3% 3%
    }

</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbar"></div>

<section class="session_box">
    <div class="session">
        <img class="session_img" th:src="${model.imgUrl}"  onerror="this.src='/img/default.jfif'" >
    </div>
    <div class="session" >
        <p class="p" style="text-align: left;font-size: 18px;color: cornflowerblue">简介</p>
        <p  class="p" th:text="'模型名称：'+${model.name}">机器人入门</p>
        <p  class="p" >参考课时：2课时</p>
        <p th:if="${session.user.role == 2}"
           th:onclick="createLesson([[${model.id}]],[[${model.name}]],[[${model.imgUrl}]],
           [[${model.limitTime}]],[[${model.moveLimit}]],[[${model.issue}]])"
           class="p">
            <a id="join"  class="button-warning pure-button"
               style="margin-top: 10%;text-align: left;margin-left:5%;background-color: #f59b00">新建课程</a></p>
        <p th:if="${session.user.role == 1}"
           class="p">
            <a th:href="@{/admin/edit(id=${model.id})}"  class="button-warning pure-button"
               style="margin-top: 10%;text-align: left;margin-left:5%;background-color: #f59b00">编辑</a></p>
    </div>
    <div class="session" style="width: 70%">
        <p style="text-align: left;font-size: 18px;color: cornflowerblue">模型简介</p>
        <p th:text="${model.remark}" class="" style="font-size: 15px;text-align: left">
        </p>
<!--        <img style="width: 60%;height: 60%" src="/img/line.png">-->
        <p style="font-size: 15px;text-align: left">
        <hr>
            基础公式：
        <hr>
        <span th:text="${model.rule}"></span>
        </p>
    </div>
    <div class="session" style="width: 25%;margin-left: 2%">
        <p class="p" style="text-align: left;font-size: 18px;color: cornflowerblue">基本信息</p>
        <p class="p">创建课程数  28 节</p>
        <p class="p">模型创建人 王光亚</p>
    </div>




</section>

<script>
    // function createLesson() {
    //     alert("创建成功！");
    //
    // }
    function createLesson(modelId,modelName,imgUrl,limitTime,moveLimit,issue) {
        new Dialog({
            title: '创建课程',
            content: '<h6>课程名称</h6>' +
                '<input style="font-size: 18px;" id="name" placeholder = "课程名称" value= '+modelName+' class="ui-input">' +
                '<h6>期数</h6>' +
                '<input style="font-size: 18px;" readonly id="issue"  value="'+issue+'" class="ui-input" type="number" >' +
                '<h6>结束计时(min)</h6>' +
                '<input style="font-size: 18px;" readonly id="times"   value="'+limitTime+'" class="ui-input" type="number">' +
                '<h6>每次偏移量</h6>' +
                '<input style="font-size: 18px;" readonly    value="'+moveLimit+'" class="ui-input" type="number">' +
                '<h6>描述</h6>' +
                '<input style="font-size: 18px;" id="remark" placeholder = "限200字"  class="ui-input" type="text">' ,
            buttons: [{
                events: function (event) {
                    // 按钮禁用
                    // event.dialog是当前实例对象
                    console.log(event)
                    console.log(event.type)
                    if(event.type){
                        console.log(document.getElementById("name").value);
                    }
                    var data = "";
                    data = data + "name="+document.getElementById("name").value;
                    data = data + "&remark="+document.getElementById("remark").value;
                    data = data + "&modelId="+modelId;
                    data = data + "&imgUrl="+imgUrl;
                    console.log(data);
                    sendJump("/lesson/insert","/teacher/lesson",data);
                    event.dialog.remove();
                }
            }, {}]
        });
    }


</script>


</body>
</html>